<template>
    <div id="translateForm">

            <div class="row">
        <div class="col-md-offset-3 col-md-6">
        <form id="transForm" class="well form-inline" v-on:submit="fromSubmit">
            <input class="form-control" type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
            <select class="form-control" v-model="language">
                <!--添加翻译语种可到Yandex中的Translate API查找相应的code-->
                <option value="en">English</option>
                <option value="az">Azerbaijan</option>
                <option value="sq">Albanian</option>
                <option value="ja">Japanese</option>
                <option value="ko">Korean</option>
            </select>
            <input class="btn btn-primary" type="submit" value="翻译">
        </form>
        </div>
            </div>

    </div>
</template>

<script>
    export default {
        name: "translateForm",
        data:function(){
            return{
                textToTranslate:"",
                language:""
            }
        },
        methods:{
            fromSubmit:function(e) {
                //alert(this.textToTranslate);
                this.$emit("formSubmit",this.textToTranslate,
                this.language);//传回给父组件
                e.preventDefault();//取消默认事件，不反复刷新页面
            }
        },
        created() {
            this.language="en";
        }//自动执行的一个方法，打开网页后默认选中en

    }
</script>

<style>
    #transForm{
        border-radius: 10px;
        border: 1px #ccc solid;
    }
</style>